<button
  mat-button
  ixTest="columns"
  [matMenuTriggerFor]="menu"
>
  {{ 'Columns' | translate }}
  <ix-icon name="mdi-menu-down"></ix-icon>
</button>

<mat-menu #menu="matMenu" multiple overlapTrigger="false">
  <div (click)="$event.stopPropagation()">
    <button
      mat-menu-item
      [ixTest]="['toggle-all-columns']"
      (click)="toggleAll(); saveColumnPreferences(); enableResetButton();"
    >
      <ix-icon [name]="!isAllSelected ? 'remove' : 'check_circle'"></ix-icon>
      @if (isAllSelected) {
        <span>{{ 'Unselect All' | translate }}</span>
      } @else {
        <span>{{ 'Select All' | translate }}</span>
      }
    </button>
  </div>

  <div (click)="$event.stopPropagation()">
    @for (column of columns(); track column) {
      @if (column.title) {
        <button
          mat-menu-item
          [ixTest]="['toggle-column', column.title]"
          (click)="toggle(column); saveColumnPreferences(); enableResetButton();"
        >
          <ix-icon [name]="isSelected(column) ? 'remove' : 'check_circle'"></ix-icon>
          <span>{{ column.title | translate }}</span>
        </button>
      }
    }
  </div>

  <div (click)="$event.stopPropagation()">
    <button
      mat-menu-item
      [ixTest]="['reset-columns-to-defaults']"
      [disabled]="isResetToDefaultDisabled()"
      (click)="resetToDefaults(); saveColumnPreferences()"
    >
      <ix-icon name="mdi-undo"></ix-icon>
      <span>{{ 'Reset to Defaults' | translate }}</span>
    </button>
  </div>
</mat-menu>
